<template>
  <div>
      <div class="top">
          <p>表单内容</p>
      </div>
      <el-row class="top_button">
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">记录导出</el-button>
      </el-row>
      <el-table
      :data="tableData"
      style="width: 100%">
      <!-- <template>
          <el-checkbox label="复选框 A"></el-checkbox>
      </template> -->
       
      <el-table-column
        prop="Read_ID"
        label="ID"
        width="60px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_email"
        label="邮箱"
        width="150px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_adress"
        label="地址"
        width="75px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_title"
        label="产品标题"
        width="84px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_connect"
        label="联系人"
        width="170px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_tel"
        label="手机"
        width="58px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_content"
        label="你的留言"
        width="84px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_time"
        label="提交时间"
        width="149px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_ip"
        label="IP"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_tuijian"
        label="推荐"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_status"
        label="状态"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Read_editor"
        label="操作"
        width="149px"
        align="center">
        <template>
          <el-button type="primary" class="btn" @click="editor">编辑</el-button>
          <el-button type="primary" class="btn">删除</el-button>
        </template>
      </el-table-column>
       
    </el-table>
    <div class="block">
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes"
      :total="tableData.length">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:[],
            

        }
    },
    created(){
        this.$http({
            method:"get",
            path:"/leavemsg.json",
        }).then((rel)=>{
            console.log(rel[0].ReadMsg);
            this.tableData =rel[0].ReadMsg;
        }).catch((err)=>{})
       
    },
    methods:{
     editor(){
         this.$router.push({
             path:'/leavemsg/read_editor'
         })
     }
    }
}
</script>

<style scoped>
.top{
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
}
.top p{
    padding-left: 15px;
    line-height: 15px;
    border-left: 2px solid #88b7e0;
    color: #2d2b2c;
    font-size: 14px;
}
.top_button{
    height: 74px;
    padding: 17px 0;
}
.top_button .el-button{
    background: #28b5d6;
    border-radius: 0;
    font-size: 12px;
    padding: 0 17px;
    line-height: 32px;
}
.btn{
  background: #28b5d6;
    border-radius: 0;
    font-size: 12px;
    padding: 0 17px;
    line-height: 32px;
    margin:0 2px;
    float: left;
}
.el-table{
    padding-top: 17px 0;
    float: none;
    font-size: 12px;
    background: #fff;

}
.block{
    float: right;
}

</style>